<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>限定输入内容</title>
    <style>
        body{
            background-color: #F3EFE0;
        }
        .bot{
            color: #918E84;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 24px;
            position: relative;
            right: 100px;
            top: 300px;
            float: right;
        }
    </style>
</head>
<body>
    <form id="form">
        年度<input type="text" name="year">
        月份<input type="text" name="month">
        <input type="submit" value="查询">
    </form>
    <div id="result"></div>
    <script>
        var form = document.getElementById("form");
        var result = document.getElementById("result");
        var inputs = document.getElementsByTagName("input");
        form.onsubmit = function(){
            return checkYear(inputs.year) && checkMonth(inputs.month);
        }

        //测试用户输入的年份是否符合规定, 采用正则表达式进行匹配
        function checkYear(obj){
            if(!obj.value.match(/^\d{4}$/)){
                obj.style.borderColor = 'red';
                result.innerHTML = '输入错误, 年份为4位数字表示';
                return false;
            }
            result.innerHTML = '';
            return true;
        }

        //测试用户输入的月份是否符合规定, 采用正则表达式进行匹配
        function checkMonth(obj){
            if(!obj.value.match(/^(0?[1-9])|(1[012])$/)){
                obj.style.borderColor = 'red';
                result.innerHTML = '输入错误, 月份为1~12之间';
                return false;
            }
            result.innerHTML = '';
            return true;
        }

        inputs.year.onfocus = function(){
            this.style.borderColor = '';
        }

        inputs.month.onfocus = function(){
            this.style.borderColor = '';
        }
        
        //当鼠标离开此年份输入框时,调用此方法
        inputs.year.onblur = function(){
            this.value = this.value.trim();
            checkYear(this);
        }
        
        inputs.month.onblur = function(){
            this.value = this.value.trim();
            checkMonth(this);
        }
    </script>
    <div class="bot">
        <input type="button" value="返回" onclick="location.href = '../章节目录/第九章.html'">
        <br><br><br><br><br><br><br><br>
        <h3>Please appreciate((●'◡'●))......</h3>
    </div>
</body>
</html>